<!-- 表单 》 文本域 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <el-input
      v-if="lazy"
      v-model.lazy="model"
      v-bind="commonProps"
      type="textarea"
      :maxlength="max"
      :show-word-limit="!noCount"
      :rows="rowNum"
      :resize="resize ? null : 'none'"
      :autosize="autosize"
      @change="emitChange"
      @keyup.enter.native="toEnter"
    />

    <el-input
      v-else
      v-model="model"
      v-bind="commonProps"
      type="textarea"
      :maxlength="max"
      :show-word-limit="!noCount"
      :rows="rowNum"
      :resize="resize ? null : 'none'"
      :autosize="autosize"
      @input="emitChange"
      @keyup.enter.native="toEnter"
    />
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'

const name = 'FormTextarea'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: '', // 内部绑定值
      EMPTY: '', // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 行数
     */
    rowNum() {
      const { rows } = this
      if (CORE.isInt(rows)) return Number(rows)
      return null
    },

    /**
     * 自动高度
     */
    autosize() {
      const { rows } = this
      if (!CORE.isArray(rows)) return null
      if (rows.length === 1) return { minRows: Number(rows[0]) }
      return { minRows: Number(rows[0]), maxRows: Number(rows[1]) }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 回车事件
     */
    toEnter() {
      this.$emit('enter', this.model)
    },
  },
}
</script>
